<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { ref } from 'vue'
import { CourseAddService } from "@/api/CourseManage.js";
const formRef = ref()

const formModel = ref({
  id: '',
  className: '',
  teacher: '',
  room: '',
  capacity: ''
})

const rules = ref({
  viewId: [
    { required: true, message: '请输入面试者名称', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  viewName: [
    { required: true, message: '请输入面试者姓名', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  viewAge: [
    { required: true, message: '请输入面试者年龄', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  gender: [
    { required: true, message: '请输入面试者性别', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  telephone: [
    { required: true, message: '请输入面试者电话', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  address: [
    { required: true, message: '请输入面试者地址', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  curriculumVitae: [
    { required: true, message: '请输入面试者简历', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  intentionDept: [
    { required: true, message: '请输入面试者期望部门', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  grade: [
    { required: true, message: '请输入面试者成绩', trigger: 'blur' },
    {
      pattern: /^\S{2,10}/,
      message: '昵称长度在2-10个非空字符',
      trigger: 'blur'
    }
  ]
})

const submitForm = async () => {
  // 等待校验结果
  await formRef.value.validate()
  // 提交修改
  await CourseAddService(formModel.value)
  // 提示用户
  alert('上传课程信息成功')
}
</script>

<template>
  <page-container title="插入课程信息">
    <el-form ref="formRef" :model="formModel" :rules="rules" label-width="100px">
      <el-form-item label="课程编号" prop="className">
        <el-input v-model="formModel.id"></el-input>
      </el-form-item>
      <el-form-item label="课程名称" prop="className">
        <el-input v-model="formModel.className"></el-input>
      </el-form-item>
      <el-form-item label="授课老师" prop="teacher">
        <el-input v-model="formModel.teacher"></el-input>
      </el-form-item>
      <el-form-item label="授课教室" prop="room">
        <el-input v-model="formModel.room"></el-input>
      </el-form-item>
      <el-form-item label="教室容量" prop="capacity">
        <el-input v-model="formModel.capacity"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交课程信息</el-button>
      </el-form-item>
    </el-form>
  </page-container>
</template>
